<template>
  <div class="breadcrumb">
    <span v-for="(item, index) in $store.state.file.breadCrumbs" :key="index">
      <span v-if="index > 0">  / </span>
      <a @click="handleBreadcrumbClick(item,index)">{{ item.name }}</a>
    </span>
  </div>
</template>
<script>
import {getFolder} from '@/api/file'
import {mapMutations} from "vuex";
export default {
  name: "Breadcrumb",
  data() {
    return {
      breadcrumbItems: [

      ],
    };
  },
  mounted() {

  },
  methods: {
    ...mapMutations('file',['pushBreadCrumps', 'pushFolderList','deleteFolderList','matchBreadCrumps']),
    handleBreadcrumbClick(item,index) {
      console.log(index);
      this.matchBreadCrumps(index);
      getFolder(item.id).then(res => {
        // console.log("dianjie",res)
        let data = []
        this.deleteFolderList(data)
        // console.log("清空",this.$store.state.file.folderList)
        // console.log(res.data)
        for (let item of res.data){
          this.pushFolderList(item)
        }
      })
    }
  }
};
</script>
<style lang="scss" scoped>
.breadcrumb {
  height: 40px;
  font-size: 18px;
  display: flex;
  align-items: center;
  font-weight: 600;
  color: rgb(37, 38, 43);
}
</style>
